import React from 'react'
import AppBar from '../../components/AppBar'
import { OrderCard } from '../OrderListPage'
import { orderGet, orderPos } from '../../api/customer'
import { DisplayMap, DelivererMarkerRender, ShopMarkerRender } from '../../components/Map'

export class OrderDetail extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            position: {
                dlng: 0,
                dlat: 0,
                slng: 0,
                slat: 0
            }
        }
    }

    componentDidMount() {
        orderGet(this.props.match.params.id, (e) => {
            orderPos(this.props.match.params.id, (data) => {
                let deliverer = data.deliverer
                if (!deliverer) {
                    deliverer = {
                        lng: 0,
                        lat: 0
                    }
                }
                this.setState({
                    order: e,
                    position: {
                        dlng: deliverer.lng,
                        dlat: deliverer.lat,
                        slng: data.shop.lng,
                        slat: data.shop.lat
                    }
                })
            })

        })
    }

    getPositions() {
        let lbl;
        let s = {
            lng: this.state.position.slng,
            lat: this.state.position.slat,
            render: <ShopMarkerRender label={this.state.order.shopName} />
        };
        let d;
        let order = this.state.order

        if (order.acceptTime == 0) {
            lbl = '等待商家接单'
            d = ''
        } else if (order.delivererTakeTime == 0) {
            lbl = '商家备货中'
            d = ''
        } else if (order.delivererArriveTime == 0) {
            lbl = '骑手正在赶往商家'
            d = {
                lng: this.state.position.dlng,
                lat: this.state.position.dlat,
                render: <DelivererMarkerRender label={lbl} />
            }
        } else if (order.deliverTime == 0) {
            lbl = '骑手正在店内取货'
            d = {
                lng: this.state.position.dlng,
                lat: this.state.position.dlat,
                render: <DelivererMarkerRender label={lbl} />
            }
        } else {
            lbl = '骑手正在送货'
            d = {
                lng: this.state.position.dlng,
                lat: this.state.position.dlat,
                render: <DelivererMarkerRender label={lbl} />
            }
            s = ''
        }
        return [
            d,
            s
        ]
    }

    render() {
        if (this.state.order) {
            let OrderPanel = <OrderCard order={this.state.order} />
            return (
                <>
                    <AppBar />
                    <div className="container">
                        {OrderPanel}
                        <DisplayMap points={this.getPositions()} />
                    </div>
                </>
            )
        } else {
            return (
                <AppBar />
            )
        }
    }
}